<template> 
  <div class="cartlist">
      <div class="cartlist_header">
        <div class="cartlist_header_all">
          <span 
            class="cartlist_header_icon iconfont"
            v-html="cartList? '&#xe70f;':'&#xe66c;'"
          >            
          </span>  
          全选
        </div>
        <div 
          class="cartlist_header_clear" 
        >
          <span
            class="cartlist_header_clear_btn"
          >
            清空购物车
          </span>
        </div>
      </div>
    <div v-for="(item,index) in  cartList" :key="index">
      <div class="product">
        <div class="shopName">{{item.shopName}}</div>
        <div v-for="(info,index) in item.productList" :key="index" class="productList">
          <div v-if="info.count>0">
            <span 
              class="productList_checked iconfont"
              v-html="info.check? '&#xe70f;':'&#xe66c;'"
            >             
            </span>
            <img :src="info.imgUrl" alt="" class="productList_img">
            <div class="productList_name">{{info.name}}</div>
            <div class="productList_price">
              <span class="productList_price_now">&yen;{{info.price}}</span>
              <span class="productList_price_old">&yen;{{info.oldPrice}}</span>
            </div>
            <div class="productList_number">
              <span 
                class="productList_number_minus iconfont"
              >
                &#xe701;
              </span>
              {{info.count || 0}}
              <span 
                class="productList_number_plus iconfont"
              >
                &#xe667;
              </span>
            </div>
          </div>          
        </div>
      </div>
    </div>
  </div>
  <div class="check">
    <div class="check_icon">
      <img 
        src="http://www.dell-lee.com/imgs/vue3/basket.png"
        class="check_icon_img"
      >
      <div class="check_icon_tag">{{}}</div>
    </div>
    <div class="check_info">
      总计：<span class="check_info_price">&yen;{{}} </span>
    </div>
    <div class="check_btn">
      <router-link :to="{path:'/orderConfirmation/'}">去结算</router-link> 
    </div>
  </div>
  <Docker :currentIndex="1"/>
</template>

<script>
import Docker from '../../components/Docker.vue'
import { mapState } from 'vuex'

export default {
  name:'CartList',
  components:{
    Docker
  },
  computed:{
    ...mapState(['cartList'])
  },
  setup(){
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/mixins.scss';
@import '../../style/virables.scss';

.cartlist{
  position: absolute;
  width: 100%;
  background: #f8f8f8;
  overflow-y: scroll;
  overflow-x: hidden;
  left: 0;
  right: 0;
  top: 0;
  bottom: .5rem;
  &_header{
    display: flex; 
    border-bottom: .01rem solid $content-bgColor;
    line-height: .52rem;
    font-size: .14rem;
    color: $content-fontColor;
    &_all{
      width: .64rem;
      margin-left: .18rem;
    }
    &_icon{
      display: inline-block;
      color: $btn-bgColor;
      margin-right: .1rem;
      font-size: .2rem;
      vertical-align: top;
    }
    &_clear{
      flex: 1;
      margin-right: .16rem;
      text-align: right;
      &_btn{
        display: inline-block;
      }
    }
  }
  .product{
    position: relative;
    margin-top: .2rem;
    .shopName{
      font-size: .16rem;
      padding-left: .2rem;
    }
    .productList{ 
      position: relative;
      border-top: 1px solid $content-bgColor;
      &_img{
        position: relative;
        width:.68rem;
        top: .1rem;
        left: .6rem;
      }
      &_name{
        position: absolute;
        left: 1.6rem;
        bottom: .58rem;
        font-weight: bold;
        font-size: .14rem;
      }
      &_price{
        position: relative;
        left: 1.6rem;
        bottom: .1rem;
        &_now{
          font-size: .14rem;
          color: red;
        }
        &_old{
          color: $light-fontColor;
          text-decoration: line-through;
          margin-left: .1rem;
        }
      }
      &_number{
        position: absolute;
        right: .12rem;
        bottom: .12rem;
      }
      &_checked{
        position: absolute;
        color: $btn-bgColor;
        font-size: .2rem;
        left: .20rem;
        top: .33rem;
      }
    }
  }
}
.check{
  position: absolute;
  bottom: 50px;
  display: flex;
  height: .49rem;
  border-top: .01rem solid $content-bgColor;
  line-height: .49rem;
  width: 100%;
  &_icon{
    position: relative;
    width: .84rem;
    &_img{
      display: block;
      margin: .12rem auto;
      width: .28rem;
      height: .26rem;
    }
    &_tag{
      position: absolute;
      left: .46rem;
      top: .04rem;
      padding: 0 .04rem;
      min-width:.2rem;
      height: .2rem;
      line-height: .2rem;
      background-color: $hightlight-fontColor;
      border-radius: .1rem;
      font-size: .12rem;
      text-align: center;
      color: $bgColor;
      transform: scale(.5);
      transform-origin: left center;
    }
  }
  &_info{
    flex: 1;   
    color: $content-fontColor;
    font-size: .12rem;
    &_price{
      color: $hightlight-fontColor;
      font-size: .18rem;
    }
  }
  &_btn{
    width: .98rem;
    background-color:#4fb0F9 ;
    text-align: center;
    font-size: .14rem;
    a{
      color: $bgColor;
      text-decoration: none;
    }
  }
}
</style>